<template>
  <div class="lists">
    <el-dialog title="提示" :visible.sync="isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ff4949"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="editMember">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="memberListData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      align="center"
    >
      <el-table-column prop="id" label="编号" sortable width="180">
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" sortable width="180">
      </el-table-column>
      <el-table-column prop="addtime" label="创建时间">
        <template slot-scope="scope">
          <span v-if="scope.row.addtime != ''">
            {{ scope.row.addtime}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1">启用</el-tag>
          <el-tag v-if="scope.row.status == 2" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="showInfo(scope.row.uid)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getMemberList,
  getMemberInfo,
  getMemberEdit,
} from "../../../request/api";
export default {
  data() {
    return {
      uid: "",
      isShowDialog: false,
      // 会员数据列表
      memberListData: [],
      ruleForm: {
        nickname: "", //昵称
        phone: "", //手机号
        password: "", //密码
        status: "", //状态1正常2禁用
      },
    };
  },
  methods: {
    // 获取会员数据列表
    getMemberListData() {
      getMemberList().then(
        (res) => {
          if (res.data.code == 200) {
            this.memberListData = res.data.list;
          }
        },
        (err) => err
      );
    },
    // 展示编辑信息
    showInfo(uid) {
      this.uid = uid;
      getMemberInfo({ uid }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.list;
            this.isShowDialog = true;
          }
        },
        (err) => err
      );
    },
    // 编辑
    editMember() {
      let obj = {
        uid: this.uid,
        ...this.ruleForm,
      };
      getMemberEdit(obj).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("编辑成功");
            this.isShowDialog = false;
            this.getMemberListData();
          }
        },
        (err) => err
      );
    },
  },
  mounted() {
    this.getMemberListData();
  },
 
};
</script>

<style scoped>
</style>